<!DOCTYPE html>
<html class="loginHtml">
<head>
    <meta charset="utf-8">
    <title>登录--协会后台管理2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="${ctxPath}/static/manage/favicon.ico">
    <link rel="stylesheet" href="${ctxPath}/static/manage/layui/css/layui.css" media="all" />
</head>
<body>
    <div class="x-body">
        <form id="userAddForm" class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">用户账号</label>
                <div class="layui-input-inline">
                    <input type="text" id="account" name="account" lay-verify="required|account" autocomplete="off"   placeholder="请输入用户账号" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux"><span class="x-red" style="color: red">*</span>必填 可用于登录</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户姓名</label>
                <div class="layui-input-inline">
                    <input type="text" id="name" name="name" lay-verify="required|name" autocomplete="off"   placeholder="请输入用户名" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux"><span class="x-red" style="color: red">*</span>必填 可用于登录</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">登录密码</label>
                <div class="layui-input-inline">
                    <input type="password" id="salt" name="password" lay-verify="required|salt" autocomplete="off"   placeholder="请输入密码" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux"><span class="x-red" style="color: red">*</span>必填</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-inline">
                    <input type="password" id="qSalt" name="qSalt" lay-verify="required|qSalt" autocomplete="off"   placeholder="请再次输入密码" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux"><span class="x-red" style="color: red">*</span>必填</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户手机</label>
                <div class="layui-input-inline">
                    <input type="text" id="phone" name="phone" lay-verify="required|phone" autocomplete="off"   placeholder="请输入用户手机" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux"><span class="x-red" style="color: red">*</span>必填 可用于登录</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机验证码</label>
                <div class="layui-input-inline">
                    <input type="text" id="yzm" name="yzm" lay-verify="required" autocomplete="off"   placeholder="请输入手机验证码" class="layui-input">
                </div>
                <input style="float: left;" id="btn" type="button" class="layui-btn" value="获取验证码" onclick="verification()">
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">QQ邮箱</label>
                <div class="layui-input-inline">
                    <input type="text" id="email" name="email"  autocomplete="off" lay-verify="email"  placeholder="请输入邮箱" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux"><span class="x-red" style="color: red">*</span>必填 可用于登录</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">出生日期</label>
                <div class="layui-input-inline">
                    <input type="text" id="birthday" name="birthdayForm" lay-verify="title" autocomplete="off" readonly="readonly"  placeholder="请输入出生日期" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">内网IP</label>
                <div class="layui-input-inline">
                    <input type="text" id="ip" name="ip" lay-verify="title" autocomplete="off"   placeholder="请输入内网IP" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">兴趣爱好</label>
                <div class="layui-input-inline">
                    <input type="text" id="version" name="version" lay-verify="title" autocomplete="off"   placeholder="请输入兴趣爱好" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-danger" type="button" lay-submit="" lay-filter="comAdd">完成</button>
                </div>
            </div>
        </form>
    </div>
</body>
</html>
<script src="${ctxPath}/static/manage/js/jquery.js"></script>
<script type="text/javascript" src="${ctxPath}/static/manage/layui/layui.js"></script>
<script type="text/javascript" src="${ctxPath}/static/manage/js/login.js"></script>
<script>
    var sms="";
    var InterValObj; //timer变量，控制时间
    var count = 60; //间隔函数，1秒执行
    var curCount;//当前剩余秒数
    function verification(){
        curCount = count;

        var phone=$("#phone").val();
        if(phone!="" && (/^1[3|5|7|8][0-9]\d{4,8}$/.test(phone)))
        {
            $.ajax({
                url:"sendSMS",
                type:"get",
                data:{
                    phone:phone
                },
                success:function(result){
                    sms=result;
                    alert("验证码已发送至您的手机，请注意查收");
                }
            });
        }else {
            alert("请输入合法手机号");
            return;
        }

        $("#btn").attr("disabled", "true");
        $("#btn").val(curCount + "秒后可重新发送");
        InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次请求后台发送验证码 TODO
    }
    //timer处理函数
    function SetRemainTime() {
        if (curCount == 0) {
            window.clearInterval(InterValObj);//停止计时器
            $("#btn").removeAttr("disabled");//启用按钮
            $("#btn").val("重新发送验证码");
        }
        else {
            curCount--;
            $("#btn").val(curCount + "秒后可重新发送");
        }
    }

    layui.use(['laydate','form','layer'],function () {
        var form = layui.form;
        var laydate = layui.laydate;
        var layer = layui.layer;
        var $ = layui.$;
        //表单验证
        form.render();//这句一定要加，占坑
        form.verify({
            phone: [/^1[3|4|5|7|8]\d{9}$/, '手机必须11位，只能是数字！'],
            account: function(value){
                if(value.length < 2 || value.length >6){
                    return '请输入2-6个字符';
                }
            },
            salt: function(value){
                if(value.length < 2 || value.length >8){
                    return '请输入2-8个字符';
                }
            },
            qSalt: function(value){
                if($("#salt").val() != value){
                    return '两次密码不一致';
                }
            },
            name: function(value){
                if(value.length < 2 || value.length >6){
                    return '请输入2-6个字符';
                }
            },
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#birthday' //指定元素
        });

        var myLay = parent.layer.getFrameIndex(window.name);
        // 监听提交
        form.on('submit(comAdd)', function () {
            var code=$("#yzm").val();
            if(sms==code){
                $.ajax({
                    url: '/userAdd',
                    type: 'post',
                    data: $("#userAddForm").serialize(),
                    dataType: 'text',
                    success: function (result) {
                        alert(result);
                        parent.layer.close(myLay);
                    }
                });
            }else{
                alert("验证码错误");

            };
        });
    })


</script>

